<template>
  <div id="app">
    <!-- 顶部标题栏 -->
    <div class="page-header">
      <h1>多模态大语言模型</h1>
    </div>

    <div class="main-container">
      <!-- 左侧：模型参数配置 -->
      <div class="sidebar">
        <!-- 提示词管理面板 -->
        <div class="panel">
          <div class="panel-header" @click="togglePromptPanel">
            <span class="icon">💡</span>
            <span class="panel-title">提示词管理</span>
            <span class="toggle-icon">{{ promptPanelCollapsed ? '▼' : '▲' }}</span>
          </div>
          
          <div v-show="!promptPanelCollapsed" class="panel-content">
            <div class="form-item">
              <label class="form-label">自定义提示词(可选)</label>
              <textarea 
                class="textarea" 
                v-model="customPrompt" 
                placeholder="请输入自定义提示词..."
                rows="4"
              ></textarea>
            </div>
          </div>
        </div>

        <!-- 上传图片面板 -->
        <div class="panel">
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
            <div class="panel-title" style="margin: 0;">上传图片 (最多4张,按1→2→3→4顺序横向排列)</div>
            <button 
              v-if="uploadedImages.length > 0" 
              class="btn-clear-all" 
              @click="handleClearImages"
              title="清空所有图片"
            >
              🗑️ 清空
            </button>
          </div>
          <div class="uploader-grid">
            <image-slot
              v-for="i in 4"
              :key="i"
              :index="i"
              :file-obj="uploadedImages[i - 1]"
              @select="handleImageSelect(i - 1, $event)"
              @remove="handleImageRemove(i - 1)"
            />
          </div>
        </div>
      </div>

      <!-- 右侧：AI聊天界面 -->
      <div class="content">
        <ai-chat
          :uploaded-images="uploadedImages"
          :api-config="apiConfig"
          :custom-prompt="customPrompt"
          @clear-images="handleClearImages"
        />
      </div>
    </div>
  </div>
</template>

<script>
import ImageSlot from './components/ImageSlot.vue';
import AIChat from './components/AIChat.vue';
import apiConfig from './config/api';

export default {
  name: 'App',
  components: {
    ImageSlot,
    'ai-chat': AIChat
  },
  data() {
    return {
      promptPanelCollapsed: false,
      language: 'zh',
      template: 'general',
      customPrompt: '',
      uploadedImages: [],
      apiConfig: apiConfig
    };
  },
  methods: {
    togglePromptPanel() {
      this.promptPanelCollapsed = !this.promptPanelCollapsed;
    },
    handleImageSelect(index, file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        // 图片以 base64 格式存储
        this.$set(this.uploadedImages, index, {
          file: file,
          url: e.target.result, // base64 格式的图片
          base64: e.target.result // 明确的 base64 字段
        });
      };
      reader.readAsDataURL(file);
    },
    handleImageRemove(index) {
      this.$delete(this.uploadedImages, index);
    },
    handleClearImages() {
      this.uploadedImages = [];
    }
  }
};
</script>

<style scoped>
#app {
  min-height: 100vh;
  background: var(--bg);
}

.page-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.page-header h1 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}

.sub-header {
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.subtitle {
  font-size: 13px;
  color: var(--muted);
}

.tabs {
  display: flex;
  gap: 8px;
}

.tab {
  padding: 6px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  transition: all 0.2s;
}

.tab.active {
  background: #ff7a00;
  color: #fff;
}

.main-container {
  display: flex;
  height: calc(100vh - 80px);
  overflow: auto;
  width: 100%;
}

.sidebar {
  overflow-y: auto;
  padding: 16px;
  background: var(--bg);
  flex: 1;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.panel-title {
  font-weight: 600;
  flex: 1;
  font-size: 13px;
}

.toggle-icon {
  font-size: 12px;
  color: var(--muted);
}

.panel-content {
  margin-top: 12px;
}

.form-item {
  margin-bottom: 12px;
}

.form-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.radio-group {
  display: flex;
  gap: 16px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
}

.select,
.textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  outline: none;
}

.textarea {
  resize: vertical;
  font-family: inherit;
}

.button-row {
  display: flex;
  gap: 8px;
}

.btn {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}

.btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.uploader-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 8px;
}

.content {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  padding: 16px 16px 0;
  flex: 2;
}

.btn-clear-all {
  border: 1px solid #ff4d4f;
  background: #fff;
  border-radius: 4px;
  padding: 4px 12px;
  cursor: pointer;
  font-size: 12px;
  color: #ff4d4f;
  transition: all 0.2s;
}

.btn-clear-all:hover {
  background: #ff4d4f;
  color: #fff;
}
</style>